<template>
  <div class="table-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
          添加
        </el-button>
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
          删除
        </el-button>
        <el-button type="primary" @click="testMessage">baseMessage</el-button>
        <el-button type="primary" @click="testALert">baseAlert</el-button>
        <el-button type="primary" @click="testConfirm">baseConfirm</el-button>
        <el-button type="primary" @click="testNotify">baseNotify</el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-form
          ref="form"
          :model="queryForm"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input v-model="queryForm.title" placeholder="标题" />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              native-type="submit"
              @click="handleQuery"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      :height="height"
      @selection-change="setSelectRows"
      @sort-change="tableSortChange"
    >
      <el-table-column
        show-overflow-tooltip
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column show-overflow-tooltip label="序号" width="95">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="title"
        label="标题"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="作者"
        prop="author"
      ></el-table-column>
      <el-table-column show-overflow-tooltip label="头像">
        <template #default="{ row }">
          <el-image
            v-if="imgShow"
            :preview-src-list="imageList"
            :src="row.img"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="点击量"
        prop="pageViews"
        sortable
      ></el-table-column>
      <el-table-column show-overflow-tooltip label="状态">
        <template #default="{ row }">
          <el-tooltip
            :content="row.status"
            class="item"
            effect="dark"
            placement="top-start"
          >
            <el-tag :type="row.status | statusFilter">
              {{ row.status }}
            </el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="时间"
        prop="datetime"
        width="200"
      ></el-table-column>
      <el-table-column show-overflow-tooltip label="操作" width="180px">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <table-edit ref="edit"></table-edit>
  </div>
</template>

<script>
  // import { getList, doDelete } from '@/api/table'
  import TableEdit from './components/TableEdit'
  export default {
    name: 'ComprehensiveTable',
    components: {
      TableEdit,
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger',
        }
        return statusMap[status]
      },
    },
    data() {
      return {
        imgShow: true,
        list: [],
        imageList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          title: '',
        },
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },
    created() {
      this.fetchData()
    },
    beforeDestroy() {},
    mounted() {},
    methods: {
      tableSortChange() {
        const imageList = []
        this.$refs.tableSort.tableData.forEach((item, index) => {
          imageList.push(item.img)
        })
        this.imageList = imageList
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      handleAdd() {
        this.$refs['edit'].showEdit()
      },
      handleEdit(row) {
        this.$refs['edit'].showEdit(row)
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        } else {
          if (this.selectRows.length > 0) {
            const ids = this.selectRows.map((item) => item.id).join()
            this.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids: ids })
              this.$baseMessage(msg, 'success')
              this.fetchData()
            })
          } else {
            this.$baseMessage('未选中任何行', 'error')
            return false
          }
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        // const { data, totalCount } = await getList(this.queryForm)
        const totalCount = 999
        const data = [
          {
            uuid: '3FFeB5F2-E8D9-e04c-A4d7-5cf5EF2cF33e',
            id: '440000197401298754',
            title: '全选。',
            status: 'draft',
            author: '康秀兰',
            datetime: '2003-04-07 18:36:04',
            pageViews: 3259,
            img:
              'https://picsum.photos/200/200?random=BDc3EE2c-6D58-dFeA-1Bc9-4e5CDA34bfB5',
            smallImg:
              'https://picsum.photos/40/40?random=2e7F46DA-819A-FF54-eCf4-dadfdC307ee2',
            switch: false,
            percent: 83,
          },
          {
            uuid: '318F7cDb-dde3-76CC-BE7d-42CfCDf2Dd6e',
            id: '230000197512055713',
            title: '好适。',
            status: 'published',
            author: '朱超',
            datetime: '2008-06-04 12:03:49',
            pageViews: 1686,
            img:
              'https://picsum.photos/200/200?random=DF9f6c84-3e25-0D44-916E-c91CCBc6D3dF',
            smallImg:
              'https://picsum.photos/40/40?random=d856b7F0-09f4-ceF6-74ef-4113C73c79EC',
            switch: false,
            percent: 87,
          },
          {
            uuid: '1c6e5674-f9c7-4Ce8-e3ce-4c2F7dD937bF',
            id: '320000199102179685',
            title: '任装。',
            status: 'draft',
            author: '秦秀英',
            datetime: '2012-01-21 09:34:12',
            pageViews: 3679,
            img:
              'https://picsum.photos/200/200?random=A9DdbBcd-D9dB-3CCA-FD96-1ebe93B7f36e',
            smallImg:
              'https://picsum.photos/40/40?random=d9f2303d-CCBe-fd6A-c752-A2De4AA81DEd',
            switch: false,
            percent: 95,
          },
          {
            uuid: 'b963C5f7-cfDA-4634-AFB0-8Ca0fBf5AAFA',
            id: '710000201805199458',
            title: '万。',
            status: 'draft',
            author: '郭洋',
            datetime: '2019-07-18 15:20:22',
            pageViews: 3258,
            img:
              'https://picsum.photos/200/200?random=2d1C1abD-9cef-d9E5-4C8a-1D5Bb84D1b34',
            smallImg:
              'https://picsum.photos/40/40?random=fDaD7b1B-67EB-eDdd-3B1E-dCBBdf4A81DA',
            switch: true,
            percent: 85,
          },
          {
            uuid: '8C7F35e5-BdFC-f37d-D2e9-271BfF29f6A1',
            id: '140000202008119708',
            title: '导被。',
            status: 'draft',
            author: '黄洋',
            datetime: '1975-11-13 15:01:56',
            pageViews: 524,
            img:
              'https://picsum.photos/200/200?random=762ACe84-2AE4-0EC8-F5c1-F5c8F64C95BE',
            smallImg:
              'https://picsum.photos/40/40?random=EF2f0f6B-1CB1-5D9E-E14D-C243bbee7Dd9',
            switch: true,
            percent: 87,
          },
          {
            uuid: '1aFDeDb2-ac7e-a1e1-bCC3-c5f5347B7aeA',
            id: '35000019820502752X',
            title: '作成。',
            status: 'draft',
            author: '周伟',
            datetime: '1997-10-28 15:19:59',
            pageViews: 2277,
            img:
              'https://picsum.photos/200/200?random=aFD86Ec6-FDCE-7C66-8F6B-ccCB9CD3dA92',
            smallImg:
              'https://picsum.photos/40/40?random=F147e6D9-6CbD-DdcB-1D3D-B0BB81Ed8dF2',
            switch: false,
            percent: 84,
          },
          {
            uuid: 'AcB2fC52-c5eA-79c5-B933-AB40A6d27bCF',
            id: '630000197809133537',
            title: '先系。',
            status: 'draft',
            author: '方军',
            datetime: '2003-04-13 12:05:14',
            pageViews: 875,
            img:
              'https://picsum.photos/200/200?random=613AD525-7Ef3-9FD7-E4ee-3CeEEA9cAEED',
            smallImg:
              'https://picsum.photos/40/40?random=992FF75B-e488-Fde5-F6fD-E8bAA29F63dA',
            switch: false,
            percent: 81,
          },
          {
            uuid: '111EA4F3-8E4f-45BA-9dbf-5dbC6E3BCfaE',
            id: '210000197705011545',
            title: '育。',
            status: 'published',
            author: '白艳',
            datetime: '1975-12-08 20:12:04',
            pageViews: 4570,
            img:
              'https://picsum.photos/200/200?random=4AdfA588-Af4F-32Eb-1DDb-C3CECF8b4fbc',
            smallImg:
              'https://picsum.photos/40/40?random=403DD861-79dE-2f77-8fE6-571d49aeDcaC',
            switch: true,
            percent: 81,
          },
          {
            uuid: 'E331Eb8F-4c5e-8723-ed15-B28F32FBc25b',
            id: '430000200208030337',
            title: '细。',
            status: 'draft',
            author: '赖艳',
            datetime: '1978-04-20 12:02:47',
            pageViews: 4064,
            img:
              'https://picsum.photos/200/200?random=20aD0cdc-FD4C-D4fB-FBBf-2C37CdAA79f9',
            smallImg:
              'https://picsum.photos/40/40?random=96E8AdE9-DcdE-Fcb7-da7b-C56D8aCCeFCb',
            switch: false,
            percent: 93,
          },
          {
            uuid: 'f29fD0a1-D22D-beBd-475b-DD4d9fECf1CA',
            id: '220000199110084228',
            title: '直。',
            status: 'draft',
            author: '潘平',
            datetime: '2005-07-06 01:09:43',
            pageViews: 2130,
            img:
              'https://picsum.photos/200/200?random=FF51Cf41-980F-a16D-A9d5-D6b64aeeE61C',
            smallImg:
              'https://picsum.photos/40/40?random=3840AF2e-c7Bf-D4A9-CbDA-D6C280E1529d',
            switch: true,
            percent: 98,
          },
          {
            uuid: '8AFEF4a8-b89e-e17A-d32d-6E4cFAD6ebC7',
            id: '230000200105027429',
            title: '了今。',
            status: 'published',
            author: '杨艳',
            datetime: '1987-06-12 18:52:26',
            pageViews: 3744,
            img:
              'https://picsum.photos/200/200?random=F96d4fBf-C66c-8BdE-9d56-eAf5edAc2051',
            smallImg:
              'https://picsum.photos/40/40?random=Ce49d526-95C5-e4d4-B969-0A8591a4ec9a',
            switch: true,
            percent: 92,
          },
          {
            uuid: '3DEc93dC-EAeA-bbbd-8F8D-D33Eb01A4BDB',
            id: '650000200801156636',
            title: '后。',
            status: 'draft',
            author: '毛娟',
            datetime: '1994-09-01 08:12:10',
            pageViews: 4927,
            img:
              'https://picsum.photos/200/200?random=EF1bbcDc-B914-e7B3-4BF2-dC2DD41b6c9C',
            smallImg:
              'https://picsum.photos/40/40?random=EEb4E39c-bBd3-Cf71-b1D9-a34B5a278d74',
            switch: false,
            percent: 83,
          },
          {
            uuid: 'c0CCFE98-A339-7Adc-c745-A9Db8F8ebDeA',
            id: '450000197812158141',
            title: '家要。',
            status: 'draft',
            author: '于芳',
            datetime: '1986-09-29 16:35:45',
            pageViews: 860,
            img:
              'https://picsum.photos/200/200?random=9c409d5a-159d-C3e5-FFEf-f24fdedb7a93',
            smallImg:
              'https://picsum.photos/40/40?random=3AFaA880-c1B5-8bb2-c1A7-e0bCCADfac9D',
            switch: true,
            percent: 93,
          },
          {
            uuid: '1548C25d-43dC-e29e-521B-37F8fdD035Ea',
            id: '650000200312040819',
            title: '部发。',
            status: 'draft',
            author: '何洋',
            datetime: '1987-09-10 06:28:16',
            pageViews: 3191,
            img:
              'https://picsum.photos/200/200?random=A58F1Ede-D2E6-F2e1-88ff-DC22FCF679cb',
            smallImg:
              'https://picsum.photos/40/40?random=De6617e5-A2d3-Cbe0-Dd5C-d5faE6946bAC',
            switch: true,
            percent: 81,
          },
          {
            uuid: 'f8C143d8-32C7-8FfB-5b18-eA16db6EfdE8',
            id: '650000202001177550',
            title: '品。',
            status: 'published',
            author: '吕霞',
            datetime: '1990-10-10 10:20:38',
            pageViews: 1569,
            img:
              'https://picsum.photos/200/200?random=BBAAA8C0-1da1-e6CE-4Adc-79B0BCbAB969',
            smallImg:
              'https://picsum.photos/40/40?random=506Ca2A3-daCD-F770-DBB1-28e98D0dAAC3',
            switch: false,
            percent: 94,
          },
          {
            uuid: 'EB4F97cA-BAa7-6bE7-01b6-Af75c7E4c1Bf',
            id: '820000198708066574',
            title: '酸调。',
            status: 'published',
            author: '龙伟',
            datetime: '1994-11-01 06:00:54',
            pageViews: 4883,
            img:
              'https://picsum.photos/200/200?random=dd1d4Edf-9F3c-826e-843c-abc83bFE18EB',
            smallImg:
              'https://picsum.photos/40/40?random=b7F1f255-afe6-ed48-beaB-b7116161dEFC',
            switch: true,
            percent: 92,
          },
          {
            uuid: 'cAdaF9f9-DFFE-197B-FBa1-3D7FE4c5bD3E',
            id: '500000200702197552',
            title: '立。',
            status: 'draft',
            author: '常强',
            datetime: '1998-12-09 09:12:17',
            pageViews: 4483,
            img:
              'https://picsum.photos/200/200?random=e3a22baD-80D6-ddAb-AdE9-b464FdE78c6b',
            smallImg:
              'https://picsum.photos/40/40?random=4bdba7f3-BbCa-8925-3dBC-B1f432FDD9bf',
            switch: true,
            percent: 91,
          },
          {
            uuid: '2Eac1423-e83B-e02E-0DcB-87EbdfA414d8',
            id: '440000197905029072',
            title: '须。',
            status: 'draft',
            author: '钱娜',
            datetime: '1974-06-26 05:13:00',
            pageViews: 3254,
            img:
              'https://picsum.photos/200/200?random=ef8e8Cd7-227b-8cf6-62dF-B6A5Dbb0F49B',
            smallImg:
              'https://picsum.photos/40/40?random=2b9809Fe-dAe8-87bF-dC97-CFCC7DcFBFE1',
            switch: false,
            percent: 94,
          },
          {
            uuid: '76d35c1d-DCb4-E59e-AebB-79EEd41778ae',
            id: '350000202001167167',
            title: '许。',
            status: 'draft',
            author: '范娜',
            datetime: '2009-04-09 10:16:59',
            pageViews: 1940,
            img:
              'https://picsum.photos/200/200?random=5d88E65C-AbDD-b5fD-3bAA-cc5f383bF0cf',
            smallImg:
              'https://picsum.photos/40/40?random=d8dfBF6E-cdce-B9C3-d5Bb-64eFB89467e5',
            switch: false,
            percent: 90,
          },
          {
            uuid: 'Cae47e22-516D-EE18-9db1-9CfDFF6bfF6b',
            id: '620000198801095364',
            title: '革非。',
            status: 'published',
            author: '吴娜',
            datetime: '1984-11-11 06:48:00',
            pageViews: 3937,
            img:
              'https://picsum.photos/200/200?random=e557A58B-59b9-775b-4dEa-0D45dCeB91DC',
            smallImg:
              'https://picsum.photos/40/40?random=3CdBdB6C-CBf8-CfA4-4Ab0-aCD6Abfef9c6',
            switch: true,
            percent: 93,
          },
        ]
        this.list = data
        const imageList = []
        data.forEach((item, index) => {
          imageList.push(item.img)
        })
        this.imageList = imageList
        this.total = totalCount
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      },
      testMessage() {
        this.$baseMessage('test1', 'success')
      },
      testALert() {
        this.$baseAlert('11')
        this.$baseAlert('11', '自定义标题', () => {
          /* 可以写回调; */
        })
        this.$baseAlert('11', null, () => {
          /* 可以写回调; */
        })
      },
      testConfirm() {
        this.$baseConfirm(
          '你确定要执行该操作?',
          null,
          () => {
            /* 可以写回调; */
          },
          () => {
            /* 可以写回调; */
          }
        )
      },
      testNotify() {
        this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
      },
    },
  }
</script>
